<script setup lang="ts">
/**
 * 订阅管理页面组件
 * 提供RSS源添加、管理、分类等功能
 */

import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { 
  ArrowLeft, 
  Plus, 
  Search, 
  Edit3, 
  Trash2, 
  Globe, 
  Rss, 
  FolderPlus,
  Folder,
  Check,
  X,
  ExternalLink,
  RefreshCw
} from 'lucide-vue-next';
import { useRSSStore } from '@/stores/useRSSStore';
import type { RSSFeed, Category } from '@/types';

// 路由实例
const router = useRouter();

// RSS Store
const rssStore = useRSSStore();

// 响应式数据
const showAddFeedModal = ref(false);
const showAddCategoryModal = ref(false);
const searchKeyword = ref('');
const editingFeed = ref<RSSFeed | null>(null);
const editingCategory = ref<Category | null>(null);
const selectedCategoryFilter = ref<string | null>(null);

// 表单数据
const feedForm = ref({
  title: '',
  url: '',
  description: '',
  categoryId: 'default',
});

const categoryForm = ref({
  name: '',
  color: '#90CAF9',
  icon: 'folder',
});

// 加载状态
const isAddingFeed = ref(false);
const isAddingCategory = ref(false);
const isDeletingFeed = ref<string | null>(null);
const isDeletingCategory = ref<string | null>(null);
const isValidatingUrl = ref(false);
const urlValidationResult = ref<{ valid: boolean; message: string } | null>(null);

// 计算属性
const filteredFeeds = computed(() => {
  let feeds = rssStore.feeds;
  
  // 按分类过滤
  if (selectedCategoryFilter.value) {
    feeds = feeds.filter(feed => feed.categoryId === selectedCategoryFilter.value);
  }
  
  // 按关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    feeds = feeds.filter(feed => 
      feed.title.toLowerCase().includes(keyword) ||
      feed.description?.toLowerCase().includes(keyword) ||
      feed.url.toLowerCase().includes(keyword)
    );
  }
  
  return feeds;
});

const categoriesWithCounts = computed(() => {
  return rssStore.categories.map(category => ({
    ...category,
    feedCount: rssStore.feeds.filter(feed => feed.categoryId === category.id).length,
  }));
});

/**
 * 返回首页
 */
const goBack = () => {
  router.push('/');
};

/**
 * 验证RSS URL
 * @param {string} url - RSS URL
 */
const validateRSSUrl = async (url: string) => {
  if (!url) {
    urlValidationResult.value = null;
    return;
  }
  
  try {
    isValidatingUrl.value = true;
    
    // 简单的URL格式验证
    const urlPattern = /^https?:\/\/.+/;
    if (!urlPattern.test(url)) {
      urlValidationResult.value = {
        valid: false,
        message: '请输入有效的HTTP或HTTPS URL'
      };
      return;
    }
    
    // 模拟RSS验证
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 检查是否已存在
    const existingFeed = rssStore.feeds.find(feed => feed.url === url);
    if (existingFeed) {
      urlValidationResult.value = {
        valid: false,
        message: '该RSS源已存在'
      };
      return;
    }
    
    urlValidationResult.value = {
      valid: true,
      message: 'RSS源验证成功'
    };
    
  } catch (error) {
    urlValidationResult.value = {
      valid: false,
      message: '验证失败，请检查URL是否正确'
    };
  } finally {
    isValidatingUrl.value = false;
  }
};

/**
 * 打开添加RSS源模态框
 */
const openAddFeedModal = () => {
  feedForm.value = {
    title: '',
    url: '',
    description: '',
    categoryId: 'default',
  };
  editingFeed.value = null;
  urlValidationResult.value = null;
  showAddFeedModal.value = true;
};

/**
 * 打开编辑RSS源模态框
 * @param {RSSFeed} feed - RSS源对象
 */
const openEditFeedModal = (feed: RSSFeed) => {
  feedForm.value = {
    title: feed.title,
    url: feed.url,
    description: feed.description || '',
    categoryId: feed.categoryId || 'default',
  };
  editingFeed.value = feed;
  urlValidationResult.value = null;
  showAddFeedModal.value = true;
};

/**
 * 提交RSS源表单
 */
const submitFeedForm = async () => {
  try {
    isAddingFeed.value = true;
    
    if (editingFeed.value) {
      // 更新RSS源
      await rssStore.updateFeed(editingFeed.value.id, {
        title: feedForm.value.title,
        description: feedForm.value.description,
        categoryId: feedForm.value.categoryId,
      });
    } else {
      // 添加新RSS源
      await rssStore.addFeed({
        title: feedForm.value.title,
        url: feedForm.value.url,
        description: feedForm.value.description,
        categoryId: feedForm.value.categoryId,
        isActive: true,
      });
    }
    
    showAddFeedModal.value = false;
  } catch (error) {
    console.error('保存RSS源失败:', error);
  } finally {
    isAddingFeed.value = false;
  }
};

/**
 * 删除RSS源
 * @param {RSSFeed} feed - RSS源对象
 */
const deleteFeed = async (feed: RSSFeed) => {
  if (!confirm(`确定要删除RSS源"${feed.title}"吗？`)) {
    return;
  }
  
  try {
    isDeletingFeed.value = feed.id;
    await rssStore.deleteFeed(feed.id);
  } catch (error) {
    console.error('删除RSS源失败:', error);
  } finally {
    isDeletingFeed.value = null;
  }
};

/**
 * 刷新RSS源
 * @param {RSSFeed} feed - RSS源对象
 */
const refreshFeed = async (feed: RSSFeed) => {
  try {
    await rssStore.refreshFeed(feed.id);
  } catch (error) {
    console.error('刷新RSS源失败:', error);
  }
};

/**
 * 打开添加分类模态框
 */
const openAddCategoryModal = () => {
  categoryForm.value = {
    name: '',
    color: '#90CAF9',
    icon: 'folder',
  };
  editingCategory.value = null;
  showAddCategoryModal.value = true;
};

/**
 * 打开编辑分类模态框
 * @param {Category} category - 分类对象
 */
const openEditCategoryModal = (category: Category) => {
  categoryForm.value = {
    name: category.name,
    color: category.color,
    icon: category.icon || 'folder',
  };
  editingCategory.value = category;
  showAddCategoryModal.value = true;
};

/**
 * 提交分类表单
 */
const submitCategoryForm = async () => {
  try {
    isAddingCategory.value = true;
    
    if (editingCategory.value) {
      // 更新分类
      await rssStore.updateCategory(editingCategory.value.id, {
        name: categoryForm.value.name,
        color: categoryForm.value.color,
        icon: categoryForm.value.icon,
      });
    } else {
      // 添加新分类
      await rssStore.addCategory({
        name: categoryForm.value.name,
        color: categoryForm.value.color,
        icon: categoryForm.value.icon,
        order: rssStore.categories.length,
      });
    }
    
    showAddCategoryModal.value = false;
  } catch (error) {
    console.error('保存分类失败:', error);
  } finally {
    isAddingCategory.value = false;
  }
};

/**
 * 删除分类
 * @param {Category} category - 分类对象
 */
const deleteCategory = async (category: Category) => {
  if (category.id === 'default') {
    alert('默认分类不能删除');
    return;
  }
  
  const feedCount = rssStore.feeds.filter(feed => feed.categoryId === category.id).length;
  if (feedCount > 0) {
    alert(`该分类下还有${feedCount}个RSS源，请先移动或删除这些RSS源`);
    return;
  }
  
  if (!confirm(`确定要删除分类"${category.name}"吗？`)) {
    return;
  }
  
  try {
    isDeletingCategory.value = category.id;
    await rssStore.deleteCategory(category.id);
  } catch (error) {
    console.error('删除分类失败:', error);
  } finally {
    isDeletingCategory.value = null;
  }
};

/**
 * 格式化时间
 * @param {Date} date - 日期对象
 * @returns {string} 格式化后的时间字符串
 */
const formatTime = (date: Date): string => {
  return date.toLocaleDateString('zh-CN');
};

// 组件挂载时初始化数据
onMounted(() => {
  // 如果还没有初始化，先初始化
  if (rssStore.feeds.length === 0) {
    rssStore.initialize();
  }
});
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-blue-100 shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <!-- 返回按钮和标题 -->
          <div class="flex items-center space-x-4">
            <button
              @click="goBack"
              class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
            >
              <ArrowLeft class="w-5 h-5" />
              <span>返回</span>
            </button>
            
            <div>
              <h1 class="text-xl font-bold text-gray-900">订阅管理</h1>
              <p class="text-sm text-gray-500">管理您的RSS源和分类</p>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="flex items-center space-x-3">
            <button
              @click="openAddCategoryModal"
              class="flex items-center space-x-2 px-4 py-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
            >
              <FolderPlus class="w-4 h-4" />
              <span>添加分类</span>
            </button>
            
            <button
              @click="openAddFeedModal"
              class="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-all duration-200"
            >
              <Plus class="w-4 h-4" />
              <span>添加RSS源</span>
            </button>
          </div>
        </div>
      </div>
    </header>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- 左侧边栏 - 分类管理 -->
        <div class="lg:col-span-1">
          <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-lg font-semibold text-gray-900">分类</h2>
              <button
                @click="openAddCategoryModal"
                class="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
                title="添加分类"
              >
                <FolderPlus class="w-4 h-4" />
              </button>
            </div>
            
            <!-- 全部RSS源选项 -->
            <button
              @click="selectedCategoryFilter = null"
              :class="[
                'w-full text-left p-3 rounded-xl transition-all duration-200 mb-2',
                !selectedCategoryFilter
                  ? 'bg-blue-100 text-blue-700 shadow-md'
                  : 'hover:bg-blue-50 text-gray-700'
              ]"
            >
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                  <Rss class="w-4 h-4" />
                  <span class="font-medium">全部RSS源</span>
                </div>
                <span class="text-sm bg-blue-200 text-blue-700 px-2 py-1 rounded-full">
                  {{ rssStore.feeds.length }}
                </span>
              </div>
            </button>
            
            <!-- 分类列表 -->
            <div class="space-y-2">
              <div
                v-for="category in categoriesWithCounts"
                :key="category.id"
                class="group"
              >
                <button
                  @click="selectedCategoryFilter = category.id"
                  :class="[
                    'w-full text-left p-3 rounded-xl transition-all duration-200',
                    selectedCategoryFilter === category.id
                      ? 'bg-blue-100 text-blue-700 shadow-md'
                      : 'hover:bg-blue-50 text-gray-700'
                  ]"
                >
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2 flex-1 min-w-0">
                      <div 
                        class="w-3 h-3 rounded-full flex-shrink-0"
                        :style="{ backgroundColor: category.color }"
                      ></div>
                      <span class="font-medium truncate">{{ category.name }}</span>
                    </div>
                    <div class="flex items-center space-x-2">
                      <span class="text-sm bg-gray-200 text-gray-700 px-2 py-1 rounded-full">
                        {{ category.feedCount }}
                      </span>
                      
                      <!-- 分类操作按钮 -->
                      <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex space-x-1">
                        <button
                          @click.stop="openEditCategoryModal(category)"
                          class="p-1 text-gray-400 hover:text-blue-600 rounded"
                          title="编辑分类"
                        >
                          <Edit3 class="w-3 h-3" />
                        </button>
                        
                        <button
                          v-if="category.id !== 'default'"
                          @click.stop="deleteCategory(category)"
                          :disabled="isDeletingCategory === category.id"
                          class="p-1 text-gray-400 hover:text-red-600 rounded disabled:opacity-50"
                          title="删除分类"
                        >
                          <Trash2 class="w-3 h-3" />
                        </button>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 主内容区域 - RSS源列表 -->
        <div class="lg:col-span-3">
          <!-- 搜索栏 -->
          <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6 mb-6">
            <div class="relative">
              <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
              <input
                v-model="searchKeyword"
                type="text"
                placeholder="搜索RSS源标题、描述或URL..."
                class="w-full pl-10 pr-4 py-3 bg-blue-50/50 border border-blue-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
              />
            </div>
          </div>

          <!-- RSS源列表 -->
          <div class="space-y-4">
            <div
              v-for="feed in filteredFeeds"
              :key="feed.id"
              class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6 group hover:shadow-xl transition-all duration-300"
            >
              <div class="flex items-start justify-between">
                <div class="flex-1 min-w-0">
                  <!-- RSS源标题和状态 -->
                  <div class="flex items-center space-x-3 mb-2">
                    <h3 class="text-lg font-semibold text-gray-900 truncate">
                      {{ feed.title }}
                    </h3>
                    
                    <span :class="[
                      'px-2 py-1 rounded-full text-xs',
                      feed.isActive 
                        ? 'bg-green-100 text-green-700' 
                        : 'bg-gray-100 text-gray-700'
                    ]">
                      {{ feed.isActive ? '启用' : '禁用' }}
                    </span>
                  </div>
                  
                  <!-- RSS源描述 -->
                  <p v-if="feed.description" class="text-gray-600 text-sm mb-3">
                    {{ feed.description }}
                  </p>
                  
                  <!-- RSS源URL -->
                  <div class="flex items-center space-x-2 text-sm text-gray-500 mb-3">
                    <Globe class="w-4 h-4" />
                    <a 
                      :href="feed.url" 
                      target="_blank" 
                      class="text-blue-600 hover:text-blue-800 truncate"
                    >
                      {{ feed.url }}
                    </a>
                    <ExternalLink class="w-3 h-3" />
                  </div>
                  
                  <!-- RSS源统计信息 -->
                  <div class="flex items-center space-x-4 text-sm text-gray-500">
                    <span>文章数：{{ feed.articleCount }}</span>
                    <span>未读：{{ feed.unreadCount }}</span>
                    <span>创建时间：{{ formatTime(feed.createdAt) }}</span>
                    <span v-if="feed.lastSyncAt">最后同步：{{ formatTime(feed.lastSyncAt) }}</span>
                  </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="ml-4 flex flex-col space-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                  <button
                    @click="refreshFeed(feed)"
                    class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
                    title="刷新"
                  >
                    <RefreshCw class="w-4 h-4" />
                  </button>
                  
                  <button
                    @click="openEditFeedModal(feed)"
                    class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
                    title="编辑"
                  >
                    <Edit3 class="w-4 h-4" />
                  </button>
                  
                  <button
                    @click="deleteFeed(feed)"
                    :disabled="isDeletingFeed === feed.id"
                    class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all duration-200 disabled:opacity-50"
                    title="删除"
                  >
                    <Trash2 class="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-if="filteredFeeds.length === 0" class="text-center py-12">
              <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Rss class="w-12 h-12 text-gray-400" />
              </div>
              <h3 class="text-lg font-medium text-gray-900 mb-2">
                {{ searchKeyword ? '没有找到匹配的RSS源' : '还没有添加任何RSS源' }}
              </h3>
              <p class="text-gray-500 mb-6">
                {{ searchKeyword ? '尝试使用其他关键词搜索' : '点击上方按钮添加您的第一个RSS源' }}
              </p>
              <button
                v-if="!searchKeyword"
                @click="openAddFeedModal"
                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
              >
                <Plus class="w-4 h-4 mr-2" />
                添加RSS源
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑RSS源模态框 -->
    <div v-if="showAddFeedModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <!-- 背景遮罩 -->
        <div 
          class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
          @click="showAddFeedModal = false"
        ></div>

        <!-- 模态框内容 -->
        <div class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">
              {{ editingFeed ? '编辑RSS源' : '添加RSS源' }}
            </h3>
            <button
              @click="showAddFeedModal = false"
              class="p-2 text-gray-400 hover:text-gray-600 rounded-lg"
            >
              <X class="w-5 h-5" />
            </button>
          </div>

          <form @submit.prevent="submitFeedForm" class="space-y-4">
            <!-- RSS URL -->
            <div v-if="!editingFeed">
              <label class="block text-sm font-medium text-gray-700 mb-2">
                RSS URL *
              </label>
              <div class="relative">
                <input
                  v-model="feedForm.url"
                  @blur="validateRSSUrl(feedForm.url)"
                  type="url"
                  required
                  placeholder="https://example.com/feed.xml"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
                <div v-if="isValidatingUrl" class="absolute right-3 top-1/2 transform -translate-y-1/2">
                  <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
                </div>
              </div>
              
              <!-- URL验证结果 -->
              <div v-if="urlValidationResult" :class="[
                'mt-2 text-sm flex items-center space-x-1',
                urlValidationResult.valid ? 'text-green-600' : 'text-red-600'
              ]">
                <Check v-if="urlValidationResult.valid" class="w-4 h-4" />
                <X v-else class="w-4 h-4" />
                <span>{{ urlValidationResult.message }}</span>
              </div>
            </div>

            <!-- 标题 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                标题 *
              </label>
              <input
                v-model="feedForm.title"
                type="text"
                required
                placeholder="RSS源标题"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>

            <!-- 描述 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                描述
              </label>
              <textarea
                v-model="feedForm.description"
                rows="3"
                placeholder="RSS源描述（可选）"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              ></textarea>
            </div>

            <!-- 分类 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                分类
              </label>
              <select
                v-model="feedForm.categoryId"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                <option 
                  v-for="category in rssStore.categories" 
                  :key="category.id" 
                  :value="category.id"
                >
                  {{ category.name }}
                </option>
              </select>
            </div>

            <!-- 操作按钮 -->
            <div class="flex justify-end space-x-3 pt-4">
              <button
                type="button"
                @click="showAddFeedModal = false"
                class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200"
              >
                取消
              </button>
              <button
                type="submit"
                :disabled="isAddingFeed || (urlValidationResult && !urlValidationResult.valid)"
                class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {{ isAddingFeed ? '保存中...' : (editingFeed ? '更新' : '添加') }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 添加/编辑分类模态框 -->
    <div v-if="showAddCategoryModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <!-- 背景遮罩 -->
        <div 
          class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
          @click="showAddCategoryModal = false"
        ></div>

        <!-- 模态框内容 -->
        <div class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">
              {{ editingCategory ? '编辑分类' : '添加分类' }}
            </h3>
            <button
              @click="showAddCategoryModal = false"
              class="p-2 text-gray-400 hover:text-gray-600 rounded-lg"
            >
              <X class="w-5 h-5" />
            </button>
          </div>

          <form @submit.prevent="submitCategoryForm" class="space-y-4">
            <!-- 分类名称 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                分类名称 *
              </label>
              <input
                v-model="categoryForm.name"
                type="text"
                required
                placeholder="分类名称"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>

            <!-- 分类颜色 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                分类颜色
              </label>
              <div class="flex items-center space-x-3">
                <input
                  v-model="categoryForm.color"
                  type="color"
                  class="w-12 h-10 border border-gray-300 rounded-lg cursor-pointer"
                />
                <input
                  v-model="categoryForm.color"
                  type="text"
                  placeholder="#90CAF9"
                  class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="flex justify-end space-x-3 pt-4">
              <button
                type="button"
                @click="showAddCategoryModal = false"
                class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200"
              >
                取消
              </button>
              <button
                type="submit"
                :disabled="isAddingCategory"
                class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {{ isAddingCategory ? '保存中...' : (editingCategory ? '更新' : '添加') }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>